<template>
  <el-container id="containerdiv">
  <!-- <img :src="imgUrl" class="imgSize"> -->
  <el-main :style ="note" >

<div class="formdiv">
    <el-form v-if="!isReg" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="age">
          <el-input v-model="name"></el-input>
        </el-form-item>    
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button @click="reg()">注册</el-button>
        </el-form-item>
    </el-form>

    <el-form v-else status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="age">
          <el-input v-model="name"></el-input>
        </el-form-item>    
          <el-form-item label="真实姓名" prop="age" >
          <el-input v-model="trueName" @focus="changeName"></el-input>
        </el-form-item> 
        <el-form-item label="密码" prop="pass" >
          <el-input type="password" v-model="password" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="repeat" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUser()">确定</el-button>
          <el-button @click="cancel()">取消</el-button>
        </el-form-item>
    </el-form>
</div>
  </el-main>
  </el-container>

</template>
 
<script>
import HelloWorld from '@/components/HelloWorld'
import axios from 'axios'
import qs from 'qs'
import API from "@/api/login";
import store from '../store';
const {
getName,
login,
addUser
} = API;
export default {
  mounted:function(){
       document.getElementById("containerdiv").style.height = window.innerHeight  + "px";
  },
  data() {
     var checkAge = (rule, value, callback) => {
        if (value===""||value===null) {
          return callback(new Error('不能为空'));
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
       note: {
          backgroundImage: "url(" + require("../assets/home.jpg") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "100% auto",
          marginTop: "5px",
          },
       imgUrl:require("../assets/home.jpg"),
      isReg: false,
      name: "",
      password: "",
      repeat: "",
      trueName:"",
       rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        },
      
    };
  },
  methods: {
    changeName(){
      if(this.isReg){
         
          axios({ method: "get",
                        url: getName,
                        params: {
                          name: this.name,
                          password: this.password,          
                          }
                        }                                  
            ).then((response) => {
               if(response.data.data==="ok"){

               }else{
                 this.$message({ message: "用户名已被注册", type: 'warning' });
               }
              
               
            }).catch((error) => {
                console.log(error)
            }) 
      }
    },
    login() {  
       // 组件中使用get方法
       
        axios({ method: "post",
                        url: login,
                        params: {
                          name: this.name,
                          password: this.password,          
                          }
                        }                                  
            ).then((response) => {
            
               
               if(response.data.data!="false"){
                 this.$router.push({name:'HelloWorld'});
                this.$message({ message: "登录成功", type: 'success' });
                    //将后台返回的token和user存在store                      
                this.$store.commit('SET_TOKEN', response.data.data.token)
                this.$store.commit('GET_USER', response.data.data.name)
                this.$store.commit('GET_TRUENAME', response.data.data.truename)
                
                 axios.defaults.headers.common['token'] =this.$store.state.user.token;
                 }
               else{
                 this.password="";
                 alert("账号或者密码出错,请重新输入")
               }
             
               
            }).catch((error) => {
                console.log(error)
            }) 
    },
    reg() {
      this.isReg = true;
    },
    cancel() {
      this.isReg = false;
    },
    addUser() {
      var user={name: this.name,
            password: this.password,
             truename:this.trueName};     
            
      //验证两次输入密码是否一致
      if (this.password === this.repeat) {
     
        //组件中使用post方法
          axios(
          {
                        method: "POST",
                        url: addUser,
                        data:user,
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8',  //指定消息格式
                        },
                    }
           )
          .then(res => {
                   this.$message({ message: "注册成功,请登录", type: 'success' });
                    this.isReg = false;
          }, res => {
            // 错误回调
                    console.log("222")
          })
     

      

      } else {
        alert("两次密码不一致");
      }
    }
  }
};
</script>
 
<style scoped>
 .imgSize{
   
   width: 40px;
   height: 40px ;
    margin-left: -11px;
    margin-top: 10px;
 }
 
 .formdiv{
   position: relative;
       width: 30%;
    top: 30%;
    left: 33%;
 }
</style>